<template>
  <view class="result-container">
    <!-- 结果状态显示 -->
    <view class="result-content">
      <!-- 成功状态 -->
      <view v-if="result === 'success'" class="result-success">
        <view class="status-icon success">✅</view>
        <view class="status-title">连接成功！</view>
        <view class="status-message">
          恭喜您，已成功连接到WiFi网络
          <br />现在可以正常上网了
        </view>
        
        <view class="success-info">
          <view class="info-item">
            <text class="info-label">网络名称：</text>
            <text class="info-value">{{ networkName || 'WiFi网络' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">连接时间：</text>
            <text class="info-value">{{ currentTime }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">有效期：</text>
            <text class="info-value">24小时</text>
          </view>
        </view>
      </view>
      
      <!-- 失败状态 -->
      <view v-if="result === 'failed'" class="result-failed">
        <view class="status-icon error">❌</view>
        <view class="status-title">连接失败</view>
        <view class="status-message">
          {{ errorMessage || '很抱歉，网络连接失败' }}
          <br />请重新尝试或联系网络管理员
        </view>
        
        <view class="failed-tips">
          <view class="tips-title">可能的原因：</view>
          <view class="tips-list">
            <text>• 网络设备暂时繁忙</text>
            <text>• 微信授权信息有误</text>
            <text>• 网络配置异常</text>
            <text>• 设备连接数已满</text>
          </view>
        </view>
      </view>
      
      <!-- 超时状态 -->
      <view v-if="result === 'timeout'" class="result-timeout">
        <view class="status-icon timeout">⏰</view>
        <view class="status-title">连接超时</view>
        <view class="status-message">
          网络认证超时，请检查网络环境后重试
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <!-- 成功状态按钮 -->
      <template v-if="result === 'success'">
        <button class="primary-btn" @tap="openNetwork">
          测试网络连接
        </button>
        <button class="secondary-btn" @tap="goHome">
          完成
        </button>
      </template>
      
      <!-- 失败状态按钮 -->
      <template v-if="result === 'failed' || result === 'timeout'">
        <button class="primary-btn" @tap="retryAuth">
          重新认证
        </button>
        <button class="secondary-btn" @tap="goHome">
          稍后再试
        </button>
      </template>
    </view>
    
    <!-- 底部信息 -->
    <view class="footer">
      <view class="service-info">
        <text>技术支持：WiFi认证系统</text>
        <text>如有问题请联系网络管理员</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WifiResult',
  data() {
    return {
      result: 'success', // success, failed, timeout
      deviceId: '',
      errorMessage: '',
      networkName: '',
      currentTime: ''
    }
  },
  onLoad(options) {
    console.log('Result页面参数：', options)
    this.result = options.result || 'success'
    this.deviceId = options.deviceId || ''
    this.errorMessage = options.message || ''
    this.networkName = options.networkName || ''
    
    // 设置当前时间
    this.setCurrentTime()
    
    // 如果是成功状态，显示成功提示
    if (this.result === 'success') {
      uni.showToast({
        title: '连接成功！',
        icon: 'success',
        duration: 2000
      })
    }
  },
  methods: {
    // 设置当前时间
    setCurrentTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}`
    },
    
    // 测试网络连接
    openNetwork() {
      uni.showLoading({ title: '测试中...' })
      
      // 测试网络连接
      uni.request({
        url: 'https://www.baidu.com',
        method: 'GET',
        timeout: 5000,
        success: () => {
          uni.hideLoading()
          uni.showToast({
            title: '网络连接正常！',
            icon: 'success'
          })
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({
            title: '网络连接异常',
            icon: 'error'
          })
        }
      })
    },
    
    // 重新认证
    retryAuth() {
      uni.showModal({
        title: '重新认证',
        content: '是否要重新开始WiFi认证流程？',
        success: (res) => {
          if (res.confirm) {
            // 回到首页重新开始
            uni.reLaunch({
              url: `/pages/index?deviceId=${this.deviceId}`
            })
          }
        }
      })
    },
    
    // 回到首页
    goHome() {
      uni.reLaunch({
        url: '/pages/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.result-container {
  min-height: 100vh;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.result-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.result-success {
  .result-container {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  }
}

.result-failed {
  .result-container {
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  }
}

.result-timeout {
  .result-container {
    background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
  }
}

.status-icon {
  font-size: 160rpx;
  margin-bottom: 40rpx;
  
  &.success {
    color: #52c41a;
  }
  
  &.error {
    color: #ff4d4f;
  }
  
  &.timeout {
    color: #faad14;
  }
}

.status-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
}

.status-message {
  font-size: 32rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 60rpx;
}

.success-info {
  width: 100%;
  background: #f6ffed;
  border: 2rpx solid #b7eb8f;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.failed-tips {
  width: 100%;
  background: #fff2f0;
  border: 2rpx solid #ffccc7;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
}

.tips-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.tips-list {
  text-align: left;
  
  text {
    display: block;
    font-size: 26rpx;
    color: #666;
    line-height: 1.8;
    margin-bottom: 8rpx;
  }
}

.action-buttons {
  margin: 60rpx 0 40rpx;
}

.primary-btn, .secondary-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  
  &::after {
    border: none;
  }
}

.primary-btn {
  background: #1890ff;
  color: #fff;
  border: none;
}

.secondary-btn {
  background: #fff;
  color: #666;
  border: 2rpx solid #d9d9d9;
}

.footer {
  text-align: center;
  color: #999;
}

.service-info {
  font-size: 24rpx;
  line-height: 1.6;
  
  text {
    display: block;
    margin-bottom: 8rpx;
  }
}
</style> 